<!--
 * @Author: 胡俊/treence
 * @Date: 2022-05-24 09:45:03
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-05-14 16:23:58
 * @Description: 
 * @Email: treence@gmail.com
 * @Company: 3xData
 * @youWant: 我的=》质量管理体系
-->
  <template >
  <view class="container_page">

    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions" />
    <view class="main">
      <view class="card">
        <view class="title">服务类型</view>
        <uni-data-checkbox :multiple="true"
                           disabled
                           v-model="serviceType"
                           :value="serviceType"
                           :localdata="serviceTypeList"></uni-data-checkbox>
      </view>

      <view class="card"
            v-if="show1">
        <view class="title">维护保养检测质量管理体系文件
        </view>
        <upload-img :imgList="formObject.systemFiles"
                    :imgcount="5"
                    @changeImage="uploadSuccess($event,'systemFiles')"></upload-img>
      </view>

      <view class="card"
            v-if="show1">
        <view class="title">维护保养检测认证证书
        </view>
        <upload-img :imgList="formObject.authFiles"
                    :imgcount="5"
                    @changeImage="uploadSuccess($event,'authFiles')"></upload-img>
      </view>

      <view class="card"
            v-if="show2">
        <view class="title">安全评估过程控制体系文件
        </view>
        <upload-img :imgList="form.systemFiles"
                    :imgcount="5"
                    @changeImage="uploadSuccess1($event,'systemFiles')"></upload-img>
      </view>

      <view class="card"
            v-if="show2">
        <view class="title">安全评估认证证书
        </view>
        <upload-img :imgList="form.safetyCertificationFiles"
                    :imgcount="5"
                    @changeImage="uploadSuccess1($event,'safetyCertificationFiles')"></upload-img>
      </view>

      <view class="allBtn">
        <view class="btn"
              @click="save">
          <view>保存</view>
        </view>
      </view>
    </view>

    <toast></toast>
  </view>
</template>
<script>
import UploadImg from '@/components/upload/upload-img.vue';
import UniDataCheckbox from '@/components/uni-data-checkbox/uni-data-checkbox.vue';
export default {
  components: { UploadImg, UniDataCheckbox },
  data () {
    return {
      imageValue: [],
      // 服务类型
      serviceType: [],
      // 机构id
      agencyId: '',
      // 服务类型
      serviceTypeList: [
        {
          text: '维护保养检测',
          value: '1'
        },
        {
          text: '消防安全评估',
          value: '2'
        }
      ],
      navOptions: {
        // 导航栏配置参数
        statusBar: "dark",
        left: {
          icon: "back",
        },
        center: {
          title: "质量管理体系",
        },
      },
      show1: false,
      show2: false,
      formObject: {}, // 维护保养表单
      form: {}, // 安全评估表单
      loading: false,
    }
  },
  created () {
    this.getForm()

  },
  methods: {
    // 获取表单信息
    getForm () {
      if (this.loading) return

      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });

      this.$store.dispatch('organizeInfo_form', '')
        .then(res => {
          if (res && res.code === 200) {
            // 处理数据
            this.agencyId = res.data.agencyId
            this.serviceType = res.data.serviceType.split(",")
            if (res.data.maintenance) {
              this.formObject = res.data.maintenance
              this.formObject.systemFiles = res.data.maintenance.systemFiles.split(",")
              this.formObject.authFiles = res.data.maintenance.authFiles.split(",")
            }
            if (res.data.assessSafety) {
              this.form = res.data.assessSafety
              this.form.systemFiles = res.data.assessSafety.systemFiles.split(",")
              this.form.safetyCertificationFiles = res.data.assessSafety.safetyCertificationFiles.split(",")
            }
          }
        })
        .finally(() => {
          let timer = setTimeout(() => {
            this.loading = false
            uni.hideLoading();
            clearTimeout(timer)
          }, 3000);
        })
    },
    // 保存
    save () {
      if (this.loading) return

      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });

      // 如果是维护保养
      if (this.serviceType.indexOf('1') > -1) {
        if (!this.formObject.systemFiles && !this.formObject.authFiles) {
          this.$showToast({
            show: true,
            text: '文件不能为空!'
          })
        } else {
          this.formObject.agencyId = this.agencyId
          // 判断文件数据是否为数组
          if (this.formObject.systemFiles instanceof Array) {
            this.formObject.systemFiles = this.formObject.systemFiles.join(",")
          }
          // 判断文件数据是否为数组
          if (this.formObject.authFiles instanceof Array) {
            this.formObject.authFiles = this.formObject.authFiles.join(",")
          }
          // 判断是否是新增操作
          if (this.formObject.maintenanceId) {
            // 修改
            this.$store.dispatch('maintenance_update', this.formObject)
              .then(res => {
                if (res && res.code === 200) {
                  this.$showToast({
                    show: true,
                    text: '修改成功'
                  })
                  setTimeout(() => {
                    uni.navigateBack()
                  }, 1000)
                } else {
                  this.$showToast({
                    show: true,
                    text: res.msg
                  })
                }
              })
              .finally(() => {
                let timer = setTimeout(() => {
                  this.loading = false
                  uni.hideLoading();
                  clearTimeout(timer)
                }, 3000);
              })
          } else {
            // 新增
            this.$store.dispatch('maintenance_save', this.formObject)
              .then(res => {
                if (res && res.code === 200) {
                  this.$showToast({
                    show: true,
                    text: '新增成功'
                  })
                  setTimeout(() => {
                    uni.navigateBack()
                  }, 1000)
                } else {
                  this.$showToast({
                    show: true,
                    text: res.msg
                  })
                }
              })
              .finally(() => {
                let timer = setTimeout(() => {
                  this.loading = false
                  uni.hideLoading();
                  clearTimeout(timer)
                }, 3000);
              })
          }
        }
      }
      // 如果是安全评估
      if (this.serviceType.indexOf('2') > -1) {
        if (!this.form.systemFiles && !this.form.safetyCertificationFiles) {
          this.$showToast({
            show: true,
            text: '文件不能为空!'
          })
        } else {
          // 判断文件数据是否为数组
          if (this.form.systemFiles instanceof Array) {
            this.form.systemFiles = this.form.systemFiles.join(",")
          }
          // 判断文件数据是否为数组
          if (this.form.safetyCertificationFiles instanceof Array) {
            this.form.safetyCertificationFiles = this.form.safetyCertificationFiles.join(",")
          }
          this.form.agencyId = this.agencyId
          // 判断是否是新增操作
          if (this.form.safetyId) {
            // 修改
            this.$store.dispatch('safety_update', this.form)
              .then(res => {
                if (res && res.code === 200) {
                  this.$showToast({
                    show: true,
                    text: '修改成功'
                  })
                  setTimeout(() => {
                    uni.navigateBack()
                  }, 1000)
                } else {
                  this.$showToast({
                    show: true,
                    text: res.msg
                  })
                }
              })
              .finally(() => {
                let timer = setTimeout(() => {
                  this.loading = false
                  uni.hideLoading();
                  clearTimeout(timer)
                }, 3000);
              })
          } else {
            // 新增
            this.$store.dispatch('safety_save', this.form)
              .then(res => {
                if (res && res.code === 200) {
                  this.$showToast({
                    show: true,
                    text: '新增成功'
                  })
                  setTimeout(() => {
                    uni.navigateBack()
                  }, 1000)
                } else {
                  this.$showToast({
                    show: true,
                    text: res.msg
                  })
                }
              })
              .finally(() => {
                let timer = setTimeout(() => {
                  this.loading = false
                  uni.hideLoading();
                  clearTimeout(timer)
                }, 3000);
              })
          }
        }
      }
    },
    // 上传成功回调函数
    uploadSuccess (e, label) {
      this.formObject[label] = e.join(',')
    },
    // 上传成功回调函数
    uploadSuccess1 (e, label) {
      this.form[label] = e.join(',')
    },
  },
  watch: {
    // 监听服务类型
    'serviceType': {
      // 监听options，为标签初始化
      handler (val) {
        // 字段联动
        if (val.indexOf('1') > -1 && val.indexOf('2') > -1) {
          this.show1 = true;
          this.show2 = true;
        } else if (val.indexOf('1') > -1) {
          this.show1 = true;
          this.show2 = false;
        } else if (val.indexOf('2') > -1) {
          this.show1 = false;
          this.show2 = true;
        } else {
          this.show1 = false;
          this.show2 = false;
        }
      },
      deep: true,
      immediate: true
    }
  },
}
</script>
<style lang="less">
.container_page {
  background: #f4f5f5;
  height: 100vh;
  font-size: 28rpx;
}
.main {
  height: 100vh;
  overflow: auto;
  padding-bottom: 300rpx;
  .card {
    background: white;
    margin-bottom: 16rpx;
    padding: 40rpx 24rpx;
    border-radius: 20rpx;

    & > view:not(:last-child) {
      margin-bottom: 20rpx;
    }
  }
}
.title {
  color: #333;
  font-size: 30rpx;
  font-weight: bold;
  line-height: 36rpx;
  .titleTip {
    display: inline;
    font-weight: 300;
    font-size: 20rpx;
    color: red;
  }
}
.formItem {
  display: flex;
  align-items: center;

  .label {
    color: #333;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 36rpx;
    width: 35%;
  }

  .content {
    flex: 1;
    text-align: right;
  }
}

.allBtn {
  bottom: 50rpx;
  .btn {
    width: 100%;
    bottom: 25rpx;
    left: 0;
    & > view {
      height: 80rpx;
      border-radius: 10rpx;
      background: #5390ff;
      margin: 0 24rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
}
</style>